Combine images Using CSS Sprites Çözümü
Volkan İnanç İnternet sayfanızdaki görüntüleri CSS sprite kullanarak mümkün olduğu kadar az dosyada birleştirebilirsiniz.Görüntüleri CSS Sprite Kullanarak Birleştirmek
Genel Açıklama
İnternet sayfanızdaki görüntüleri CSS sprite kullanarak mümkün olduğu kadar az dosyada birleştirebilirsiniz. Bu birleştirme işlemi, diğer kaynakları indirirken gecikmeleri ve gidiş dönüş sayısını azaltmanıza yardımcı olur. Aynı zamanda, bu sayede istek ek yüküne azaltıcı yönde etki ederek, web sayfası tarafından indirilen toplam bayt sayısını azaltabilirsiniz.
Google’dan Detaylar
JavaScript ve CSS’ye benzer şekilde, birden fazla resim indirmek ek turlara sebep olur. Oldukça fazla resim içeren bir internet sitesi, gecikmeyi azaltmak için bu görüntüleri daha az çıktı dosyasında birleştirebilir. Bu da maliyet anlamında daha hesaplı olacaktır.
Görüntüleri CSS Sprite kullanarak birleştirirseniz, internet sayfanızda birden çok simge kullanıyorsanız her biri için ayrı istek gönderilmesi yerine tek bir dosyada hepsini birleştirerek oluşacak karmaşayı daha sade şekle indirgeyebilirsiniz. Her simge için ayrı imge yolları tanımlamak yerine tek bir imge yolu tanımlamanız yeterli olacaktır.
Bunlar dışında internet sitenizdeki görüntüleri ve simgeleri CSS Sprite ile birleştirmeniz, tıklandığı zaman bloğunuzun açılmasını hızlandırmanızı sağlar. Site sayfa hız optimizasyonu açısından bakıldığında bu işlemin yapılması site hızını tahminen %3 ile %5 arasında artırır.
Css Sprite ile görüntüleri en uygun şekilde birleştirmek için Photoshop veya Illustrator gibi programlardan yararlanılmalıdır. Çünkü kullanılan resimlerin yükseklik ve genişliğini tam olarak biliyor olmanız gerekir. Bunun dışında resimler arasında boşluk bulunmamasına dikkat edilmesi gerekir.
